<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";

type ConfigType = {
	label: string;
	value: any;
	labelSpan?: number;
	valueSpan?: number;
};

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const props = defineProps<{
	config: ConfigType[];
	title?: string;
}>();

// eslint-disable-next-line vue/no-dupe-keys
const config = ref([]);

watch(
	() => props.config,
	(val) => {
		config.value = val;
	},
	{ immediate: true },
);
</script>

<template>
	<Card class="storage-card-container">
		<template v-if="props.title">
			<view class="title">{{ props.title }}</view>
		</template>
		<wd-row class="row" v-for="item in config" :key="item.label">
			<wd-col :span="item.labelSpan ?? uiConfig.labelSpan">{{
				textValue(item.label)
			}}</wd-col>
			<wd-col class="ellipsis-2" :span="item.valueSpan ?? uiConfig.valueSpan">{{
				textValue(item.value)
			}}</wd-col>
		</wd-row>
		<slot name="extra"></slot>
	</Card>
</template>

<style lang="less" scoped>
@import url("./style/card.less");
@import url("./style/row.less");
</style>
